<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>修改个人信息</title>
  <link rel="stylesheet" href="/static/web/css/style.css?v=" + Date.now() >
  <script src="/static/component/jquery_3.3.1.js"></script>

</head>
<body class="container">
  <div class="wrapper">
    <main>
      <h2>👤 修改个人信息</h2>
      <form id="profile-form" class="form">
        <div class="form-group">
          <label>姓名：</label>
          <input type="text" name="name" required>
        </div>
        <div class="form-group">
          <label>身份证号码：</label>
          <input type="text" name="id_card" pattern="[A-Za-z0-9]{18}" title="请输入18位身份证号码(数字和字母)" required>
        </div>
        <div class="form-group">
          <label>电话：</label>
          <input type="text" name="phone" required>
        </div>
        <div class="form-group">
          <label>性别：</label>
          <select name="sex">
            <option value="1">男</option>
            <option value="2">女</option>
          </select>
        </div>
        <div class="form-group">
          <label>身份</label>
          <select name="type" id="type" required>
            <option value="">请选择身份</option>
            <option value="1">Boss</option>
            <option value="2">Leader</option>
            <option value="3">Phper</option>
            <option value="4">Gofer</option>
          </select>
        </div>

        <div class="form-group">
          <button type="submit" class="btn" style="background-color: #007bff; color: white;">💾 保存信息</button>
        </div>
      </form>
    </main>
  </div>


  <script src="/static/web/js/layout.js?v=" + Date.now() ></script>
  <script src="/static/web/js/checklogin.js?v=" + Date.now() ></script>

  <script>
    // 获取用户信息并填充表单
    async function fetchUserInfo() {
      try {
        // 显示加载状态
        document.querySelector('button[type="submit"]').disabled = true;
        document.querySelector('button[type="submit"]').textContent = '加载中...';
        
        const result = await $.ajax({
          url: '/web.profile/info',
          method: 'GET',
          dataType: 'json'
        });
        userInfo = result.data;
        // 填充表单数据
        document.querySelector('input[name="name"]').value = userInfo.name || '';
        document.querySelector('input[name="id_card"]').value = userInfo.id_card || '';
        document.querySelector('input[name="phone"]').value = userInfo.phone || '';
        document.querySelector('select[name="sex"]').value = userInfo.sex || '';
        document.querySelector('select[name="type"]').value = userInfo.type || '';
      } catch (error) {
        console.error('获取用户信息出错:', error);
        alert('获取用户信息失败，请刷新重试');
      } finally {
        // 恢复按钮状态
        document.querySelector('button[type="submit"]').disabled = false;
        document.querySelector('button[type="submit"]').textContent = '💾 保存信息';
      }
    }

    // 页面加载时获取用户信息
    document.addEventListener('DOMContentLoaded', fetchUserInfo);

    document.getElementById("profile-form").onsubmit = async function (e) {
      e.preventDefault();
      const data = Object.fromEntries(new FormData(this).entries());
      // console.log("保存的数据：", data);
      
      try {
        // 添加按钮加载状态
        const submitBtn = document.querySelector('button[type="submit"]');
        submitBtn.disabled = true;
        submitBtn.textContent = '保存中...';
        // console.log("保存的数据：", userInfo);
        // 调用更新接口
        const result = await $.ajax({
          url: '/web.profile/update',
          method: 'POST',
          dataType: 'json',
          data: {
            ...data,
            uId: userInfo.id // 添加uid字段
          }
        });

        if (result.code === 10401) {
          window.location.href = '/web/login.html';
        }
        
        if(result.code === 0) {
          alert("✅ 信息保存成功");
          // 添加跳转到首页的逻辑
          window.location.href = '/web/index.html';
        } else {
          alert("❌ 保存失败: " + (result.msg || '未知错误'));
        }
      } catch (error) {
        console.error('保存信息出错:', error);
        alert('❌ 保存信息失败，请重试');
      } finally {
        // 恢复按钮状态
        const submitBtn = document.querySelector('button[type="submit"]');
        submitBtn.disabled = false;
        submitBtn.textContent = '💾 保存信息';
      }
    }
  </script>
</body>
</html>
